<template>
  <div id="content-list-container">
    <a-list item-layout="horizontal" :pagination="pagination" :data-source="dataList">
      <template #renderItem="{ item }">
        <a-list-item>
          <a-list-item-meta @click="showModal(item.id)">
            <template #title>
              <a-row>
                <a-col span="20">
                  <h3>{{ item.title }}</h3>
                </a-col>
                <a-col span="4">
                  <a-button type="link" @click="editKnowledge($event, item.id)">编辑</a-button>
                  <a-button type="link" danger @click="delKnowledge($event, item.id)"
                    >删除</a-button
                  >
                </a-col>
              </a-row>
            </template>
            <template #description>
              <div class="list-item-content">
                {{ item.content }}
              </div>
            </template>
          </a-list-item-meta>
        </a-list-item>
      </template>
    </a-list>
    <a-modal
      v-model:visible="detailVisible"
      :title="modalDetail.title"
      :footer="null"
      width="80%"
      centered
    >
      <a-textarea
        v-model:value="modalDetail.content"
        style="border: 0"
        :auto-size="{ minRows: 5, maxRows: 20 }"
        readonly
      />
      <a-image
        v-for="img in modalDetail.pictures"
        :key="img.id"
        :src="img.url"
        class="modal-detial-img"
      />
    </a-modal>
  </div>
  <!-- 添加知识库 -->
  <AddKnowledge-modal
    @closeaddKnowledgeModal="closeaddKnowledgeModal"
    @getContentList="getContentList"
  />
  <!-- 删除知识库 -->
  <DelKnowledgeModal
    @closedelKnowledgeModal="closedelKnowledgeModal"
    @getContentList="getContentList"
  />
</template>

<script lang="ts">
import { defineComponent, reactive, onMounted, toRefs, watch, ref, provide } from 'vue'
import { useStore } from 'vuex'
import { key } from '@/store'
import AddKonwledgeService from '@/components/home/editKnowledgeService/AddKonwledge.service'
import AddKnowledgeModal from '@/components/home/editKnowledgeModal/AddKnowledge.vue'
import DelKonwledgeService from '@/components/home/editKnowledgeService/DelKonwledge.service'
import DelKnowledgeModal from '@/components/home/editKnowledgeModal/DelKnowledge.vue'
import common from '@/api/common'

interface ImgDetail {
  id: number
  url: string
}
interface AnswerDetail {
  title: string
  content: string
  pictures: ImgDetail[]
}

export default defineComponent({
  name: 'Home',
  components: {
    AddKnowledgeModal,
    DelKnowledgeModal
  },
  setup() {
    const store = useStore(key)

    const modalDetail = ref<AnswerDetail>({
      title: '',
      content: '',
      pictures: []
    })
    const detailVisible = ref<boolean>(false) // 弹窗显示

    const state = reactive({
      dataList: [] // 列表数据
    })
    const pagination = reactive({
      current: 1,
      pageSize: 10,
      total: 0
    })
    // 获取列表数据
    const getContentList = async () => {
      const menuId = store.getters.selectedMenuId
      const params = {
        menuId: menuId || '0',
        pageIndex: pagination.current,
        pageSize: pagination.pageSize
      }
      let result
      if (menuId === '0') {
        result = await common.getPopularList(params)
      } else {
        result = await common.getContentList(params)
      }
      const { data } = result
      state.dataList = data.records
      pagination.total = data.total
    }
    const onChange = (page: number) => {
      pagination.current = page
      getContentList()
    }
    // 获取详情数据
    const getContentDetail = async (contentId: string) => {
      const params = {
        contentId
      }
      const result = await common.getKnowledgeDetail(params)
      const { data } = result
      modalDetail.value.content = data.content
      modalDetail.value.title = `【${data.menuName}】${data.title}`
      modalDetail.value.pictures = data.pictures
      console.log(modalDetail)
      detailVisible.value = true
    }

    // 获取搜索数据
    const getSearchContent = async () => {
      const content = store.getters.searchInfo
      const params = {
        content: content || '',
        pageIndex: pagination.current,
        pageSize: pagination.pageSize
      }
      const result = await common.getCommonSearch(params)
      const { data } = result
      state.dataList = data.records
      pagination.total = data.total
    }

    onMounted(() => {
      getContentList()
    })

    // 监听菜单变化
    watch(
      () => store.getters.selectedMenuId,
      () => {
        pagination.current = 1
        getContentList()
      }
    )

    // 监听内容变化
    watch(
      () => store.getters.searchInfo,
      () => {
        pagination.current = 1
        getSearchContent()
      }
    )

    // 显示弹窗
    const showModal = (contentId: string) => {
      getContentDetail(contentId)
    }

    // 知识库操作
    const knowledgeId = ref<number>(0)
    provide('knowledgeId', knowledgeId)
    // 控制知识库添加窗口
    const { addKnowledgeState, openaddKnowledgeModal, closeaddKnowledgeModal } =
      AddKonwledgeService()
    provide('addKnowledgeState', addKnowledgeState)
    provide('closeaddKnowledgeModal', closeaddKnowledgeModal)
    const editKnowledge = (event: Event, id: number) => {
      knowledgeId.value = id
      openaddKnowledgeModal()
      event.stopPropagation()
    }
    // 控制知识库删除窗口
    const { delKnowledgeState, opendelKnowledgeModal, closedelKnowledgeModal } =
      DelKonwledgeService()
    provide('delKnowledgeState', delKnowledgeState)
    provide('closedelKnowledgeModal', closedelKnowledgeModal)
    const delKnowledge = (event: Event, id: number) => {
      knowledgeId.value = id
      opendelKnowledgeModal()
      event.stopPropagation()
    }

    return {
      ...toRefs(state),
      pagination,
      modalDetail,
      detailVisible,
      showModal,
      onChange,
      editKnowledge,
      delKnowledge,
      getContentList,
      closeaddKnowledgeModal,
      closedelKnowledgeModal
    }
  }
})
</script>
<style>
#content-list-container {
  background-color: #fff;
  padding: 20px 40px;
}
.list-item-content {
  min-height: 25px;
  max-height: 75px;
  line-height: 25px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  cursor: pointer;
  cursor: hand;
}
.modal-detial-content {
  max-height: 800px;
  line-height: 25px;
  overflow: auto;
}
.modal-detial-img {
  margin: 10px 10px;
  width: 600px;
}
</style>
